<div id="user_manage">
    <div class="user_manage">
        <el-row class="table_search">
            <el-col :span="18">
                <template>
                    <el-input type="text"
                              style="font-size: 12px"
                              id="searchBox"
                              v-model="queryOrgName"
                              @focus="queryShowMenu"
                              readonly="true"
                              placeholder="请选择机构"
                              prefix-icon="el-icon-search"
                              clearable></el-input>
                    <div id="queryMenuContent"
                         class="menuContent"
                         style="display:none; position: absolute;z-index: 1000;overflow: auto;">
                        <el-tree
                                :data="orgTree"
                                :props="defaultProps"
                                @node-click="queryTreeClick"
                                style="margin-top:0; width:180px; height: 300px;"></el-tree>
                    </div>
                    <el-input
                            placeholder="用户账号/用户名称"
                            style="font-size: 12px"
                            id="userNmaw"
                            v-model.trim="keywords"
                            prefix-icon="el-icon-search"
                            clearable>
                    </el-input>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
            <el-col :span="6" class="text-r">
                <el-button type="primary" @click="edit()" icon="el-icon-plus">新增用户</el-button>
            </el-col>
        </el-row>
        <template>
            <el-table
                    size="mini"
                    :data="tableData"
                    @row-click='handleRowHandle'
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="usercode"
                        label="用户账号"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="nickname"
                        label="用户姓名"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orgName"
                        label="所属机构"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="150"
                        prop="roleName"
                        label="用户角色">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="200"
                        prop="status"
                        label="状态"
                >
                    <template slot-scope="scope">
                        <div class="switchBox" id="switchBox">
                            <label class="switchBtn" @click="selSwitchBox($event,scope.row.status)" @change="changeType(scope.$index, scope.row)">
                                <span class="switchWords">禁用</span>
                                <i class="switchCircleActive" v-if="scope.row.status">
                                    <span class="switchCircleInfoActive"></span>
                                </i>
                                <i class="switchCircle" v-else>
                                    <span class="switchCircleInfo"></span>
                                </i>
                                <span class="switchWords" >可用</span>
                                <input type="checkbox" class="switchInput" v-model="scope.row.status">
                            </label>
                        </div>

                    </template>
                    <!--<template slot-scope="scope">-->
                        <!--<el-switch-->
                                <!--v-model="scope.row.status"-->
                                <!--@change="changeType(scope.$index, scope.row)"-->
                                <!--active-text="可用"-->
                                <!--inactive-text="禁用"-->
                                <!--active-color="#13ce66"-->
                                <!--inactive-color="#ff4949">-->
                        <!--</el-switch>-->
                    <!--</template>-->
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
                            <el-button type="info" icon="el-icon-refresh" size="mini" @click="initPass(scope.$index, scope.row)">重置密码</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block footerBox" id="fenyeBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>

    <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
    <el-dialog :title="dialogTitle" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogFormVisible" >
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px">
            <el-input v-model="form.userid" v-show="false"></el-input>
            <el-form-item label="用户账号：" prop="usercode">
                <!--<el-input v-model="form.usercode"></el-input>-->
                <input type="text" v-model="form.usercode" required lay-verify="required" style="width: 50%" autocomplete="off" class="layui-input">
            </el-form-item>
            <el-form-item label="用户姓名：" prop="nickname">
                <!--<el-input v-model="form.nickname"></el-input>-->
                <input type="text" v-model="form.nickname" required lay-verify="required" style="width: 50%" autocomplete="off" class="layui-input">
            </el-form-item>
            <el-form-item label="用户机构：" prop="corpId">
                <!--<el-input type="text" v-model="form.orgName"-->
                          <!--@focus="showMenu"-->
                          <!--readonly="true"></el-input>-->
                <input type="text" v-model="form.orgName" @focus="showMenu" readonly="true" required lay-verify="required" style="width: 50%" autocomplete="off" class="layui-input">
                <div id="menuContent"
                     class="menuContent"
                     style="display:none; position: absolute;z-index: 1000;overflow: auto;">
                    <el-tree
                            :data="orgTree"
                            :props="defaultProps"
                            @node-click="treeClick"
                            style="margin-top:0; width:180px; height: 300px;"></el-tree>
                </div>
            </el-form-item>
            <el-form-item label="用户角色：" prop="roleid" >
                <el-select v-model="form.roleid" placeholder="请选择" >
                    <el-option
                            v-for="role in roleTree"
                            :key="role.roleId"
                            :label="role.roleName"
                            :value="role.roleId">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="联系电话：" prop="phone">
                <!--<el-input type="text" v-model="form.phone"></el-input>-->
                <input type="text" v-model="form.phone" required lay-verify="required" style="width: 50%" autocomplete="off" class="layui-input">

            </el-form-item>
            <el-form-item label="Email：" prop="email">
                <!--<el-input type="text" v-model="form.email"></el-input>-->
                <input type="text" v-model="form.email" required lay-verify="required" style="width: 50%" autocomplete="off" class="layui-input">

            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="clearlNotice('form')">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="用户详情" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogInfoVisible" class="dialogDetails">
        <span class="delDialogBtn" @click="dialogInfoVisible = false;isShowingBox = false">x</span>
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">用户序号</el-col>
                <el-col :span="15" style="color: #333">{{bean.userid}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">用户账号</el-col>
                <el-col :span="15" style="color: #333">{{bean.usercode}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">用户姓名</el-col>
                <el-col :span="15" style="color: #333">{{bean.nickname}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">用户机构</el-col>
                <el-col :span="15" style="color: #333">{{bean.orgName}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">用户角色</el-col>
                <el-col :span="15" style="color: #333">{{bean.roleName}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">联系电话</el-col>
                <el-col :span="15" style="color: #333">{{bean.phone}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">EMail</el-col>
                <el-col :span="15" style="color: #333">{{bean.email}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">状态</el-col>
                <el-col :span="15" style="color: #333">{{bean.status?'启用':'停用'}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">创建人</el-col>
                <el-col :span="15" style="color: #333">{{bean.creator}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">创建时间</el-col>
                <el-col :span="15" style="color: #333">{{bean.createDate}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">更新人</el-col>
                <el-col :span="15" style="color: #333">{{bean.laseUpdateCreator}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">更新时间</el-col>
                <el-col :span="15" style="color: #333">{{bean.laseUpdateDate}}</el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
</body>
</html>

<script>

    $(function () {
        placeHolde("#searchBox","请选择机构");
        placeHolde("#userNmaw","用户账号或者用户名称");

        $("#switchBox").click(function (e) {

        })

    });

    var layer,
        loadUser;
    layui.use('layer', function(){
        layer = layui.layer;
        loadUser  = layer.load(1, {shade: [0.5, '#000']});

    });

    var user_manage =
        new Vue({
            el: "#user_manage",
            data: {
                isCheckedUser:true,


                isShowingBox:false,
                showDelBtn:false,

                ismodalClose:false,
                isEsc:false,
                checkedStatus:"",



                dialogFormVisible: false,
                dialogTitle: '',
                dialogInfoVisible: false,//查看详情
                bean: {},//查看详情
                form: {
                    userid:'',
                    usercode:'',
                    nickname: '',
                    corpId: '',
                    orgName:'',
                    roleid: '',
                    roleName:'',
                    phone:'',
                    email:''
                },
                rules: {
                    usercode: [
                        {required: true, message: '请填写用户账号', trigger: 'blur'},
                        { max: 20, message: '长度在 20 个字符以内', trigger: 'blur' }
                    ],
                    nickname: [
                        {required: true, message: '请填写用户姓名', trigger: 'blur'},
                        { max: 255, message: '长度在 255 个字符以内', trigger: 'blur' }
                    ],
                    corpId: [
                        {required: true, message: '请选择用户机构', trigger: 'blur'}
                    ],
                    roleid: [
                        {required: true, message: '请选择用户角色', trigger: 'change'}
                    ],
                    phone: [
                        {pattern:/^1[345678]\d{9}$/, message:'电话号码格式不正确', trigger: 'blur' }
                    ],
                    email: [
                        {type:'email',message:'请输入正确的邮箱',trigger:'blur,change'}
                    ]
                },
                orgTree:[],
                roleTree:[],
                defaultProps: {
                    label:'label',
                    children: 'children',
                    leaf:'leaf'
                },
                keywords: '',
                queryOrgName: '',
                queryOrgId: '',
                queryOrgLevel: '',
                tableData: [],
                totalCount: '',
                totalPage: '',
                currentPage: 1,
                pageSize: 10
            },
            methods: {
                clearlNotice:function(f) {
                    this.backHome();
                    this.$refs[f].clearValidate();
                },
                backHome:function () {
                    this.closeAddDialog();
                    this.isShowingBox = false;
                    this.dialogFormVisible = false;
                    this.dialogInfoVisible = false;
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialog:function () {
                    var form = this.$refs.form;
                    form.clearValidate();
                    this.isShowingBox = false;
                    this.dialogFormVisible = false;
                    this.dialogInfoVisible = false;
                },
                submitForm: function (formName) {
                    this.$refs[formName].validate(
                        function (valid) {
                            if (valid) {
                                var url = "${basePath}bank/user/save";
                                var option = {
                                    'userid':user_manage.form.userid,
                                    'usercode':user_manage.form.usercode,
                                    'nickname': user_manage.form.nickname,
                                    'corpId': user_manage.form.corpId,
                                    'roleid': user_manage.form.roleid,
                                    'phone': user_manage.form.phone,
                                    'email': user_manage.form.email
                                };
                                sendService(url, option, function (resData) {
                                    if (resData.status == 'success') {
                                        user_manage.isShowingBox = false;
                                        user_manage.goPage("/bank/user");
                                        layer.msg(resData.msg, {icon: 6});

                                    } else {
                                        layer.msg(resData.msg, {icon: 5});
                                    }
                                });
                            } else {
                                layer.msg("必填项不可以为空！", {icon: 5});
                                return false;
                            }
                        }

                    );
                },
                handleCurrentChange: function (currentPage) {
                    user_manage.currentPage = currentPage;
                    user_manage.searchFun();
                },
                searchFun: function () {
                    var options = {
                        'currentPage': user_manage.currentPage,
                        'keywords': user_manage.keywords,
                        'orgId':user_manage.queryOrgId,
                        'orgLevel':user_manage.queryOrgLevel
                    };
                    var url = '${basePath}/bank/user/getUserlist';
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            resData.t.forEach(function (item) {
                                item.status = item.status == '02';
                            });
                            user_manage.tableData = resData.t;
                            user_manage.totalPage = resData.page.totalPage;
                            user_manage.totalCount = resData.page.totalResult;
                            fenYeProblem(resData.page.totalPage);
                        }
                    });
                },
                edit: function (index, row) {
                    if (index != undefined) {
                        var url = "${basePath}bank/user/editQuery";
                        var options = {
                            'usercode': row.usercode,
                        };
                        user_manage.isShowingBox = true;
                        user_manage.dialogFormVisible = true;
                        sendService(url, options, function (resData) {
                            if (resData.status == 'success') {
                                if (resData.t.userid != '') {
                                    user_manage.form.userid = resData.t.userid;
                                    user_manage.form.usercode = resData.t.usercode;
                                    user_manage.form.nickname = resData.t.nickname;
                                    user_manage.form.corpId = resData.t.corpId;
                                    user_manage.form.orgName = resData.t.orgName;
                                    user_manage.form.roleid = resData.t.roleid;
                                    user_manage.form.roleName = resData.t.roleName;
                                    user_manage.form.phone = resData.t.phone;
                                    user_manage.form.email = resData.t.email;
                                }
                                user_manage.dialogTitle = "编辑角色";
                            } else {
                                user_manage.$message.error("操作失败！请联系管理员！");
                            }
                        });
                    } else {
                        user_manage.form.usercode = "";
                        user_manage.form.nickname = "";
                        user_manage.form.corpId = "";
                        user_manage.form.orgName = "";
                        user_manage.form.roleid = "";
                        user_manage.form.RoleName = "";
                        user_manage.form.phone = "";
                        user_manage.form.email = "";
                        user_manage.dialogTitle = "新建角色";
                        user_manage.isShowingBox = true;
                        user_manage.dialogFormVisible = true;
                    }
                },
                del: function(index, row) {
                    var msg1 = confirm('此操作将永久删除该用户信息, 是否继续?');
                    if(msg1){
                        var url = "${basePath}bank/user/del";
                        var options = {
                            'usercode': row.usercode,
                        };
                        sendService(url, options, function (resData) {
                            if (resData.status == 'success') {
                                layer.msg(resData.msg, {icon: 6});
                                //user_manage.$message.success(resData.msg);
                                user_manage.goPage("/bank/user")
                            } else {
                                layer.msg(resData.msg, {icon: 5});
                                //user_manage.$message.error(resData.msg);
                            }
                        });
                    }
                },
                selSwitchBox:function (e,s) {
                    if(s == true){
                        $(e.currentTarget).find("i").attr("class","switchCircle");
                        $(e.currentTarget).find("i").children().attr("class","switchCircleInfo");
                    }
                    if(s == false){
                        $(e.currentTarget).find("i").attr("class","switchCircleActive");
                        $(e.currentTarget).find("i").children().attr("class","switchCircleInfoActive");
                    }

                },
                changeType: function(index, row){
                    this.checkedStatus = row.status;

                    var url = "${basePath}bank/user/changeType";
                    var options = {
                        'usercode': row.usercode,
                        'status': row.status ? '02' : '03'
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            //user_manage.$message.success("操作成功");
                            layer.msg("操作成功", {icon: 6});
                        } else {
                            layer.msg("操作失败！请联系管理员！", {icon: 5});
                            //user_manage.$message.error("操作失败！请联系管理员！");
                        }
                    });
                    return true;
                },
                initPass: function(index, row){
                    var msg = confirm('此操作将重置用户密码, 是否继续?');
                    if(msg){
                        var url = "${basePath}bank/user/initPass";
                        var options = {
                            'usercode': row.usercode,
                        };
                        sendService(url, options, function (resData) {
                            if (resData.status == 'success') {
                                layer.msg("密码已重置！", {icon: 6});
                                //user_manage.$message.success("密码已重置！");
                            } else {
                                layer.msg(resData.msg, {icon: 5});
                                //user_manage.$message.error(resData.msg);
                            }
                        });
                    }
                },
                showMenu: function(event){
                    $("#menuContent").slideDown("fast");
                    $("body").bind("mousedown", function(event){
                        if (!(event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                            $("#menuContent").fadeOut("fast");
                            $("body").unbind("mousedown");
                        }
                    });
                },
                queryShowMenu: function(event){
                    $("#queryMenuContent").slideDown("fast");
                    $("body").bind("mousedown", function(event){
                        if (!(event.target.id == "queryMenuContent" || $(event.target).parents("#queryMenuContent").length>0)) {
                            $("#queryMenuContent").fadeOut("fast");
                            $("body").unbind("mousedown");
                        }
                    });
                },
                treeClick:function(o,node,tree){
                    user_manage.form.corpId = o.id;
                    user_manage.form.orgName = o.label;
                    $("#menuContent").fadeOut("fast");

                },
                queryTreeClick:function(o,node,tree){
                    user_manage.queryOrgId = o.id;
                    user_manage.queryOrgName = o.label;
                    user_manage.queryOrgLevel = o.level;
                    $("#queryMenuContent").fadeOut("fast");

                },
                handleRowHandle: function(row,event,column){
                    if(column.label == '操作' || column.label == '状态'){
                        return;
                    }
                    user_manage.isShowingBox = true;
                    user_manage.dialogInfoVisible = true;
                    user_manage.bean = row;
                    //user_manage.bean.status = user_manage.bean.status?'启用':'停用';
                    if(user_manage.bean.createDate && user_manage.bean.createDate !='')
                        user_manage.bean.createDate = new Date(user_manage.bean.createDate).toLocaleDateString();
                    if(user_manage.bean.lastUpdateDate && user_manage.bean.lastUpdateDate !='')
                        user_manage.bean.lastUpdateDate = new Date(user_manage.bean.lastUpdateDate).toLocaleDateString();
                },
                goPage: function (url) {
                    $(".main-right").empty();
                    $(".main-right").load('${basePath}' + url);
                }

            },
            created: function () {
                var url = '${basePath}/bank/user/getUserlist';
                var options = {currentPage: 1};
                sendService(url, options, function (resData) {
                    if (resData.status == 'success') {
                        layer.close(loadUser);
                        resData.t.forEach(function (item) {
                            item.status = item.status == '02';
                        });
                        user_manage.tableData = resData.t;
                        user_manage.totalPage = resData.page.totalPage;
                        user_manage.totalCount = resData.page.totalResult;
                        fenYeProblem(resData.page.totalPage);
                    } else {
                        alert(resData);
                    }
                });
                sendService("${basePath}bank/org/getOrgTree", null, function (resData) {
                    user_manage.orgTree = resData.t;
                });
                sendService("${basePath}bank/role/getRoleTree", null, function (resData) {
                    user_manage.roleTree = resData.t;
                });
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });
</script>

<style scoped>
    .switchInput{
        display: none;
    }
    /* 开关样式开始 */
    .switchBox{
        display: inline-block;
        line-height: 20px;
    }
    .switchBox .switchBtn{
        position: relative;
        display: inline-block;
        margin-top: 15px;
        cursor: pointer;
    }
    .switchWords{
        vertical-align: middle;
        display: inline-block;
        margin: 0 5px;
        margin-bottom: 15px;

    }
    .switchCircle{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 10px;
        background-color: #ff4444;
    }
    .switchCircleActive{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 10px;
        background-color: #13ce66;
    }
    .switchCircle .switchCircleInfo{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: 1px;
        top: 1px;
    }

    .switchCircleInfoActive{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        right: 1px;
        top: 1px;
    }
    /* 开关样式结束 */





    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    /*table按钮样式调整开始*/
    .el-button--mini, .el-button--mini.is-round{
        padding: 4px 10px;
    }
    .userManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .userManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .userManageBox .resetBtn{
        color: #02dda7;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .resetBtn:hover{
        color: #fff;
        background-color: #02dda7;
        border-color: #02dda7;
    }
    .userManageBox .el-button{
        margin-left: 0;
    }
    /*table按钮样式调整结束*/
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    /*.el-table td, .el-table th.is-leaf{*/
    /*border: none;*/
    /*}*/
    .el-table::before{
        height: 0;
    }
    .addUserBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    .add-template-form > div{
        margin-left: 45px;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    #menuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }
    .edit-template-form > div{
        margin-left: 45px;
    }
    /*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
    /*content: '';*/
    /*}*/
    #addMenuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }


    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }

    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #aaa;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        padding-left: 80px
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }
    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #aaa;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .errorBox{
        color: #fa5555;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .errorBox2333{
        color: #fa5555;
        font-size: 12px;
    }
    /*#selManage label{*/
    /*position: relative;*/
    /*}*/
    #selManage label:before{
        content: '*';
        color: #fa5555;
        margin-right: 4px;

    }


    /*详情页样式*/

    .el-dialog__header{
        z-index: 10;
    }
    .el-dialog{
        margin-top: 12vh !important;
    }
    .el-dialog__wrapper{
        overflow: hidden;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    .el-dialog__wrapper .el-dialog__body{
        margin-top: 40px;
        height: 350px;
        overflow: auto;
    }

</style>
